<template>
  <Modal
    v-model="showModal"
    title="修改密码"
    width="500"
    class="main-form-modal"
    :mask-closable="false"
    @on-cancel="cancelModal('modalForm')">
    <Form ref="modalForm" :model="pwdForm" :rules="pwdFormRules" :label-width="100" class="modal-form modal-form-block">
      <FormItem label="输入新密码：" prop="newPwd">
        <Input
          v-model="pwdForm.newPwd"
          class="pwd-input-icon-cursor"
          :type="newPwdIfView ? 'text' : 'password'"
          :icon="newPwdIfView ? 'md-eye' : 'md-eye-off'"
          placeholder="请输入新密码"
          :maxlength="32"
          @on-click="newPwdToggle">
        </Input>
      </FormItem>
      <FormItem label="验证新密码：" prop="comPwd">
        <Input
          v-model="pwdForm.comPwd"
          class="pwd-input-icon-cursor"
          :type="comPwdIfView ? 'text' : 'password'"
          :icon="comPwdIfView ? 'md-eye' : 'md-eye-off'"
          placeholder="请输入验证新密码"
          :maxlength="32"
          @on-click="comPwdToggle">
        </Input>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button @click="cancelModal('modalForm')">取消</Button>
      <Button type="primary" @click="saveFormData('modalForm')">确定</Button>
    </div>
  </Modal>
</template>

<script>
// import MD5 from 'js-md5'
// import { accountUpdatePassword } from '@/api/system-config/account-manage'
const PWDREG = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*+-~/]).{8,}$/
export default {
  name: 'PasswordForm',
  props: {
    toggle: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      showModal: false,
      newPwdIfView: false,
      comPwdIfView: false,
      pwdForm: {
        newPwd: '',
        comPwd: ''
      },
      pwdFormRules: {
        newPwd: [
          { required: true, message: '新密码不能为空！', trigger: 'change' },
          {
            validator: (rules, value, callback) => {
              if (value) {
                if (value.length < 8) {
                  callback(new Error('新密码为不能少于8位字符！'))
                } else {
                  if (PWDREG.test(value)) {
                    callback()
                  } else {
                    callback(new Error('新密码必须为包含数字、大小写字母、特殊字符的8位字符！'))
                  }
                }
              } else {
                callback(new Error('新密码不能为空！'))
              }
            }
          }
        ],
        comPwd: [
          { required: true, message: '验证新密码不能为空！', trigger: 'change' },
          {
            validator: (rules, value, callback) => {
              if (value) {
                if (value !== this.pwdForm.newPwd) {
                  callback(new Error('与新密码不一致，请重新输入！'))
                } else {
                  callback()
                }
              } else {
                callback(new Error('验证新密码不能为空！'))
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    info () {
      return this.$store.state.user.info
    }
  },
  watch: {
    toggle (newVal) {
      this.showModal = newVal
    }
  },
  methods: {
    // 新密码框的显示切换
    newPwdToggle () {
      this.newPwdIfView = !this.newPwdIfView
    },
    // 新密码框的显示切换
    comPwdToggle () {
      this.comPwdIfView = !this.comPwdIfView
    },
    // 确定
    saveFormData (formRef) {
      this.$refs[formRef].validate((valid) => {
        if (valid) {
          // let params = {
          //   userId: this.info.userId,
          //   userPassword: MD5(this.pwdForm.newPwd)
          // }
          // accountUpdatePassword(params).then(res => {
          //   if (res.data.error !== 0) {
          //     this.$Message.error(res.data.info)
          //   } else {
          //     this.$Message.success('修改密码成功，跳转登录页重新登录！')
          //     sessionStorage.removeItem('userLogin')
          //     this.$store.commit('setInfo', {})
          //     setTimeout(() => {
          //       this.$router.push({
          //         path: '/login'
          //       })
          //     }, 300)
          //   }
          // }).catch(err => {
          //   console.log('err', err)
          // })
        }
      })
    },
    // 取消
    cancelModal (formRef) {
      this.$refs[formRef].resetFields()
      this.$emit('update:toggle', false)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/style/main-panel.styl'

.pwd-input-icon-cursor
  & >>> .ivu-input-icon
    transition opacity .2s linear
    &:before
      cursor pointer !important
    &:hover:before
      opacity .8
</style>
